import { Input, Row, Col, Button, Form } from 'antd';
import React from 'react';

import styles from '../Question.less';
import { submit } from './methods';

const S = ['A', 'B', 'C', 'D'];

type propsType = {
  data: request.SelectType & { index: number };
};

export default ({ data }: propsType) => {
  const [answerIndex, setAnswerIndex] = React.useState<number | undefined>(data.question_answer);

  const nameConfig = {
    rules: [{ type: 'string' as const, required: true, message: '标题不能为空' }],
  };
  const selectConfig = {
    rules: [{ type: 'string' as const, required: true, message: '选项内容不能为空' }],
  };

  return (
    <Form
      className={styles.wrap}
      onFinish={submit({
        id: data.id,
        question_answer: answerIndex !== undefined ? answerIndex : -1,
      })}
    >
      <Form.Item className={styles.title} name="question_name" {...nameConfig}>
        <Row wrap={false}>
          <Col>
            <span className={styles.titleID}>{data.index + 1}</span>
          </Col>
          <Col flex="auto">
            <Input
              size="large"
              placeholder={data.question_name || '未填写'}
              bordered={false}
            ></Input>
          </Col>
        </Row>
      </Form.Item>

      <div>
        <ul className={styles.selectItem}>
          {S.map((el, index) => (
            <Form.Item name={`select_${el}`} key={index} {...selectConfig}>
              <li className={index === answerIndex ? styles.answer : ''}>
                <Row>
                  <Col onClick={() => setAnswerIndex(index)}>
                    <span className={styles.selL}>{el}</span>
                  </Col>
                  <Col flex="auto">
                    <Input
                      size="large"
                      placeholder={data[`select_${el}`] || '未填写'}
                      bordered={false}
                      className={styles.selT}
                    ></Input>
                  </Col>
                </Row>
              </li>
            </Form.Item>
          ))}
        </ul>
      </div>

      <Form.Item name="question_parse">
        <Row className={styles.parse}>
          <Col>
            <span>解析：</span>
          </Col>
          <Col flex="auto">
            <Input.TextArea placeholder={data.question_parse || '未填写'}></Input.TextArea>
          </Col>
        </Row>
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 16, span: 16 }}>
        <Button style={{ marginRight: 20 }} type="primary" htmlType="submit">
          提交
        </Button>
        <Button htmlType="reset">重置</Button>
      </Form.Item>
    </Form>
  );
};
